<template>
  <el-drawer
    v-model="showDrawer"
    :title="title"
    :size="size"
    :close-on-click-modal="false"
    :destroy-on-close="destroyOnClose"
    :before-close="cancel"
  >
    <template #default>
      <div class="form-drawer">
        <div class="body">
          <slot></slot>
        </div>

        <div class="actions">
          <el-button type="primary" @click="submit" :loading="loading">
            {{ confirmText }}
          </el-button>
          <el-button @click="cancel">{{ cancelText }}</el-button>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
  import { ref } from 'vue'

  // defineEmit对外暴露事件
  const emit = defineEmits(['submit', 'cancel'])
  const props = defineProps({
    title: String,
    size: {
      type: String,
      default: '45%',
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: '提交',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
  })

  const showDrawer = ref(false)
  const loading = ref(false)
  const open = () => (showDrawer.value = true)
  const close = () => (showDrawer.value = false)
  const showLoading = () => (loading.value = true)
  const hideLoading = () => (loading.value = false)
  // 点击提交
  const submit = () => {
    emit('submit')
  }

  const cancel = () => {
    emit('cancel')
  }

  // 暴露出组件，setup默认只能暴露在template中，如果需要暴露出组件需要使用defineExpose方法
  defineExpose({
    open,
    close,
    showLoading,
    hideLoading,
  })
</script>

<style scoped>
  .form-drawer {
    width: 100%;
    height: 100%;
    color: #000;
    position: relative;
    @apply flex flex-col;
  }
  .form-drawer .body {
    flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  .actions {
    height: 50px;
    @apply mt-auto flex items-center;
  }
</style>
